<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>带选择框的树</title>
	<link  href="../jquery.tree.css" rel="stylesheet" type="text/css"  class="view-source"/>
	<link  href="../../../../themes/default/style.css" rel="stylesheet" class="view-source">
	<script src="../../../../scripts/jquery.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/common.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/browserfix.js" type="text/javascript"  class="view-source"></script>
	<script src="../../../../scripts/plugins/jquery.json.js" type="text/javascript"></script>
	
	<script src="../jquery.tree.js" type="text/javascript" class="view-source"></script>
	
	<script src="../../demo.js"></script>
	<link href="../../demo.css" rel="stylesheet">

	<style>
		.tree{
			width:200px;
		}
		
		button{
			width:150px;
			font-size: 80%;
		}
		
		.ns{
			font-size:80%;
		}
	</style>

<script class="view-source noparse">
	$(function(){
		var data = {
			id:'11',
			text:'根节点',
			isExpand:true,
			childNodes:[{
				id:'21',
				text:'子节点1',
				showCheck:true, //默认为true
				childNodes:[{
					id:'ss',
					text:'子节点1-1',
					disabled:true,
					childNodes:[{
						id:'baidu',
						disabled:true,
						text:'子节点1-1-1'
					},{
						id:'google',
						text:'子节点1-1-2'
					}]
				}]
			},{
				id:'31',
				text:'子节点2（异步子节点）',
				complete:false //表示需要异步加载
			}]
		 };

		var rootPath = window.location.href.substring(0,window.location.href.lastIndexOf("\/") + 1);
		
		$('#event-tree').tree({//tree为容器ID
           	method		:	'post',
           	asyn		:	true, //异步
           	url			:	rootPath + 'data.html',
           	dataProxy	:	{type:'data',value:data},//获取数据方式
           	showCheck	:	true, //是否显示checkbox框 , 默认所有节点出现选择框
           	cascadeCheck:true //级联选择，UP向上级联 DOWN向下级联 false不级联 true向上向下级联
           }) ;

           $('.getSelectedIds').click( function(){
           	var vals = $('#event-tree').tree().getSelectedIds()  ;
			$('.value').html('选中值：<br/>'+vals) ;
           } ) ;

           $('.getSelectNodes').click( function(){
           	var vals = $('#event-tree').tree().getSelectNodes()  ;
			$('.value').html('选中节点：<br/>'+ $.json.encode( vals ) ) ;
           } ) ;

           $('input[type=radio]').click( function(){
           	$('#event-tree').tree().checkAll(0) ;//全部取消选择
			var val = this.value ;
			switch( val ){
				case 'true':
					val = true ;
					break;
				case 'false':
					val = false ;
					break ;
				default:
					break;
			}

			$('#event-tree').tree().treeOption( 'cascadeCheck', val) ;
           } ) ;

            $('.checkNode').click(function(){
           	var vals = $('#event-tree').tree().getCurrentNode()  ;
           	if(vals == undefined || vals == null || vals.id == undefined){
           		alert('请先点击要勾选的节点，再点击勾选节点按钮。');
           	}else{
           		$('#event-tree').tree().checkNode(vals.id,true) ;	
           	}
           }) ;
           
           $('.unCheckNode').click(function(){
           	var vals = $('#event-tree').tree().getCurrentNode()  ;
           	if(vals == undefined || vals == null || vals.id == undefined){
           		alert('请先点击要勾掉的节点，再点击勾掉节点按钮。');
           	}else{
           		$('#event-tree').tree().checkNode(vals.id,false) ;	
           	}
           }) ;
           
           $('.disableNode').click(function(){
           	var vals = $('#event-tree').tree().getCurrentNode()  ;
           	if(vals == undefined || vals == null || vals.id == undefined){
           		alert('请先点击要Disabled的节点，再点击Disabled节点按钮。');
           	}else{
           		$('#event-tree').tree().disableNode(vals.id,true) ;	
           	}
           }) ;

           $('.enableNode').click(function(){
           	var vals = $('#event-tree').tree().getCurrentNode()  ;
           	if(vals == undefined || vals == null || vals.id == undefined){
           		alert('请先点击要enable的节点，再点击enable节点按钮。');
           	}else{
           		$('#event-tree').tree().disableNode(vals.id,false) ;	
           	}
           }) ;
           

	}) ;
</script>
	
</head>

<body>
   <div style="float:left;width:220px;">
   	
   	<b>节点选择方式：</b><br/>
	<div class="ns">
	<input type="radio" value='true' name="ns" checked="checked"/>上下
	<input type="radio" value='UP' name="ns"/>上
	<input type="radio" value='DOWN' name="ns"/>下
	<input type="radio" value='false' name="ns"/>无
	</div>
	<hr/>
   	
	<button class='getSelectedIds'>获取所有勾选节点ID值</button> <br/>
	<button class='getSelectNodes'>获取所有勾选节点对象</button><br/>
	
	<hr/>
	
	<button class='checkNode'>勾选指定节点</button><br/>
	<button class='unCheckNode'>勾掉指定节点</button><br/>
	<button class='disableNode'>Disabled指定节点</button><br/>
	<button class='enableNode'>enable指定节点</button><br/>
	
	<br>
   </div>
	
	<div id='content-event' class='demo' style="float:left">
		
		<div id="event-tree" class="tree"></div>
		<br />
		<div class="ui-state-highlight value" style="width:300px;"></div>
	</div>
	<div style="clear:both"></div>
	
</body>
</html>